<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript-WebCamera-Demo</title>
    <link rel="stylesheet" href="./static/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <!-- UI设计，上下结构，分为四个区域：日志、视频预览、缩略图、功能操作 -->
    <div id="frame1">
        <!-- 日志 -->
        <div id="log">
            <h2>日志</h2>
            <hr>
            <div id="my_log"></div>
        </div>
        <!-- 摄像头预览视图 -->
        <div id="view">
            <h2>视频预览</h2>
            <hr>
            <div id="my_view">
                <div id="view_chrome">
                    <img id="view1" src="" style="float: left;" width="400px" height="300px" alt="主摄像头画面">
                    <img id="view2" src="" style="float: right;" width="400px" height="300px" alt="副摄像头画面">
                </div>
                <div id="view_ie"></div>
            </div>
        </div>
    </div>
    <div id="frame2">
        <!-- 缩略图 -->
        <div id="thumbnail">
            <h2>缩略图</h2>
            <hr>
            <div id="my_thumbnail"></div>
        </div>
        <!-- 操作区 -->
        <div id="function_area">
            <div id="area_title">
                <ul>
                    <li>高拍仪</li>
                    <li>PDF</li>
                    <li>人脸</li>
                    <li>OCR</li>
                    <li>设备</li>
                    <li>串口</li>
                </ul>
            </div>
            <hr>
            <div id="area_content">
                <!-- 高拍仪 -->
                <div id="content">
                    主头视频模式：<select name="" id="view1_mode" onchange="change_view1_mode()"></select>
                    主头分辨率：<select name="" id="view1_resolution_power"></select>
                    副头视频模式：<select name="" id="view2_mode" onchange="change_view2_mode()"></select>
                    副头头分辨率：<select name="" id="view2_resolution_power"></select>
                    <button onclick="set_view1_resolution_power()">设置主头分辨率</button>
                    <button onclick="set_view2_resolution_power()">设置副头分辨率</button>
                    <br>
                    <button onclick="open_view1()">打开主头视频</button>
                    <button onclick="close_view1()">关闭主头视频</button>
                    <button onclick="open_view2()">打开副头视频</button>
                    <button onclick="close_view2()">关闭副头视频</button>
                    <button onclick="rotate90()">左转</button>
                    <button onclick="rotate270()">右转</button>
                    <br>
                    <button onclick="scan(0)">主头拍照</button>
                    <button onclick="scan(1)">副头拍照</button>
                    <button onclick="flattening_scan()">展平拍照</button>
                    <button onclick="open_auto_scan()">开启自动拍照</button>
                    <button onclick="close_auto_scan()">关闭自动拍照</button>
                    <br>
                    <button onclick="ocr_barcode()">条码识别</button>
                    <button onclick="get_biokey()">获取指纹</button>
                    <button onclick="read_IDCard()">读取身份证</button>
                    <button onclick="sign()">弹出签字窗口：GW500A & GW1000A</button>
                    <button onclick="get_sign()">获取签字图片</button>
                    <br>
                    <button onclick="start_video()">开始录制视频</button>
                    <button onclick="end_video()">结束录制视频</button>
                    <button onclick="get_audio_list()">获取音频设备列表</button>
                    <button onclick="get_video_status()">获取录制视频状态</button>
                    <br>
                    <button onclick="open_a3a4()">开启A3A4幅面自动切换</button>
                    <button onclick="close_a3a4()">关闭A3A4幅面自动切换</button>
                </div>
                <!-- PDF -->
                <div id="content">
                    <button onclick="add_pdf()">拍照并添加到PDF队列</button>
                    <button onclick="save_pdf()">生成PDF文件</button>
                </div>
                <!-- 人脸 -->
                <div>
                    <button onclick="is_living_person()">活体检测</button>
                    <button onclick="person_and_IDCard()">人证比对</button>
                </div>
                <!-- OCR -->
                <div>
                    <button onclick="ocr()">OCR</button>
                </div>
                <!-- 设备 -->
                <div>
                    <button onclick="getequipmenttype()">获取设备型号</button>
                    <button onclick="getsonixserialnumber()">获取设备序列号</button>
                    <button onclick="get_status()">获取设备状态</button>
                    <button onclick="is_connect()">判断设备是否连接</button>
                </div>
                <!-- 串口 -->
                <div>
                    <button>tt</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./static/style.js"></script>
    <script>
        // 用于输出日志信息
        function my_log(msg, len=0){
            date = new Date().toTimeString().slice(0, 8);
            var oldVal = $('#my_log').html();
            if(len > 0){
                msg.substr(0, 20);
            }
            $('#my_log').html(date + ' :\t' + msg + '<br>' + oldVal);
        }

        // 传递图片base64，缩略图框生成图片用来显示,并添加到PDF队列
        function add_img(img_base64){
            img = document.createElement('img');
            img.src = "data:image/jpg;base64," + img_base64;
            img.style.width = '180px';
            img.style.height = '180px';
            document.getElementById('my_thumbnail').appendChild(img)

            // 添加到PDF队列
            // data = {
            //     "ImagePath": "",
            //     "ImageBase64": img_base64
            // }
            // $.post("http://127.0.0.1:38088/pdf=addimage", JSON.stringify(data), function(res){
            //     my_log('图片已添加到PDF队列中');
            // })
        }

        /**
         * 高拍仪相关操作
        */
        // 切换主头视频模式
        function change_view1_mode(){
            data = {
                "camidx": "0",
                "mode": String($("#view1_mode").val())
            }
            $.post("http://127.0.0.1:38088/device=getresolution", JSON.stringify(data), function(res){
                $("#view1_resolution_power option").remove();
                resolution_list = res.data.split("|");
                for(var i=0; i<resolution_list.length; i++){
                    $("#view1_resolution_power").append("<option value='" + resolution_list[i] + "'>" + resolution_list[i] + "</option>")
                }
            })
        }

        // 切换副头视频模式
        function change_view2_mode(){
            data = {
                "camidx": "1",
                "mode": String($("#view2_mode").val())
            }
            $.post("http://127.0.0.1:38088/device=getresolution", JSON.stringify(data), function(res){
                $("#view2_resolution_power option").remove();
                resolution_list = res.data.split("|");
                for(var i=0; i<resolution_list.length; i++){
                    $("#view2_resolution_power").append("<option value='" + resolution_list[i] + "'>" + resolution_list[i] + "</option>")
                }
            })
        }

        // 设置主头分辨率
        function set_view1_resolution_power(){
            // 1.关闭摄像头
            data1 = { "camidx": "0" };
            $.post("http://127.0.0.1:38088/video=close", JSON.stringify(data1), function(res){
                $("#view1").attr("src", "");

                // 2.设置分辨率
                data2 = {
                    "camidx": "0",
                    "mode": $("#view1_mode").val(),
                    "width": $("#view1_resolution_power").val().split("*")[0],
                    "height": $("#view1_resolution_power").val().split("*")[1]
                }
                $.post("http://127.0.0.1:38088/device=setresolution", JSON.stringify(data2), function(res){
                    my_log("主头分辨率设置成功");

                    // 3.打开摄像头
                    $("#view1").attr("src", "http://127.0.0.1:38088/video=stream&camidx=0");
                })
            })
        }


        // 设置副头分辨率
        function set_view2_resolution_power(){
            // 1.关闭摄像头
            data1 = { "camidx": "1" };
            $.post("http://127.0.0.1:38088/video=close", JSON.stringify(data1), function(res){
                $("#view2").attr("src", "");

                // 2.设置分辨率
                data2 = {
                    "camidx": "1",
                    "mode": $("#view2_mode").val(),
                    "width": $("#view2_resolution_power").val().split("*")[0],
                    "height": $("#view2_resolution_power").val().split("*")[1]
                }
                $.post("http://127.0.0.1:38088/device=setresolution", JSON.stringify(data2), function(res){
                    my_log("副头分辨率设置成功");

                    // 3.打开摄像头
                    $("#view2").attr("src", "http://127.0.0.1:38088/video=stream&camidx=1");
                })
            })
        }

        // 打开主头视频
        function open_view1(){
            $('#view1').attr("src", "http://127.0.0.1:38088/video=stream&camidx=0");
            my_log('打开主头成功');
        }

        // 关闭主头视频
        function close_view1(){
            data = {
                "camidx": "0"
            }
            $.post("http://127.0.0.1:38088/video=close", JSON.stringify(data), function(res){
                $("#view1").attr("src", "");
                my_log('关闭主头成功');
            })
        }

        // 打开副头视频
        function open_view2(){
            $('#view2').attr("src", "http://127.0.0.1:38088/video=stream&camidx=1");
            my_log('打开副头成功')
        }

        // 关闭副头视频
        function close_view2(){
            data = {
                "camidx": "1"
            }
            $.post("http://127.0.0.1:38088/video=close", JSON.stringify(data), function(res){
                $("#view2").attr("src", "");
                my_log('关闭副头成功');
            })
        }

        // 左转
        function rotate90(){
            data = {
                "camidx": "0",
                "rotate": "90"
            }
            $.post("http://127.0.0.1:38088/video=rotate", JSON.stringify(data), function(res){
                if(res.code == '0'){
                    my_log("旋转成功");
                }
            })
        }

        // 右转
        function rotate270(){
            data = {
                "camidx": "0",
                "rotate": "270"
            }
            $.post("http://127.0.0.1:38088/video=rotate", JSON.stringify(data), function(res){
                if(res.code == '0'){
                    my_log("旋转成功")
                }
            })
        }

        // 拍照，本示例为拍照获取base64数据
        function scan(view){
            data = {
                "filepath": "base64",
                "rotate": "0",
                "cutpage": "0",
                "camidx": String(view),
                "ColorMode": "0",
                "quality": "0"
            }
            $.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data), function(res){
                my_log("base64:" + res.photoBase64, 1);
                my_log("拍照成功");
                add_img(res.photoBase64);
            })
        }

        // 展平拍照
        function flattening_scan(){
            data = {
                "filepath": "",
                "rotate": "0",
                "camidx": "0",
                "cutpage": "0",
                "autoflat": {
                    "flat": "1",
                    "leftfilepath": "D://testleft.jpg",
                    "rightfilepath": "D://testright.jpg",
                    "removefinger": "1",
                    "doublepage": "1"
                }
            }
            $.post("http://127.0.0.1:38088/video=autoflat", JSON.stringify(data), function(res){
                if (res.code == "0"){
                    add_img(res.leftphotoBase64);
                    add_img(res.rightphotoBase64);
                    my_log("展平拍照成功，请到D盘查看【testleft.jpg】【testright.jpg】")
                }else{
                    my_log("展平失败")
                }
            })
        }

        // 开启自动拍照
        function open_auto_scan(){
            my_log("开启自动拍照成功")
            data = {
                "movedetecflag": "1",                // 开启纠偏
                "listpath": "D://httpcamera",        // 本地图片保存位置
                "filepath": "LT"                     // 图片前缀
            }
            $.post("http://127.0.0.1:38088/video=movedetec", JSON.stringify(data), function(res){
                add_img(res.data);
                my_log("拍摄成功");
                console.log(res);
                open_auto_scan();
            })
        }
        
        // 关闭自动拍照
        function close_auto_scan(){
            data = {
                "movedetecflag": "0"
            }
            $.post("http://127.0.0.1:38088/video=movedetec", JSON.stringify(data), function(res){
                my_log("关闭自动拍照成功");
            })
        }

        // 条码识别
        function ocr_barcode(){
            data = {
                "time": "20"
            }
            $.post("http://127.0.0.1:38088/barcode=get", JSON.stringify(data), function(res){
                for(var i = 0; i < res.data.length; i++ ){
                    my_log(res.data[i].barcodedata);
                }
                my_log("识别成功，条码数量" + res.data.length + "个，分别是：")
            })
        }

        // 获取指纹
        function get_biokey(){
            my_log("请按压指纹");
            data = {
                "time": "20"
            }
            $.post("http://127.0.0.1:38088/biokey=get", JSON.stringify(data), function(res){
                if(res.code == '0'){
                    add_img(res.data);
                    my_log("获取指纹成功");
                }else{
                    my_log("获取指纹失败");
                }
            })
        }

        // 读取身份证
        function read_IDCard(){
            $.post("http://127.0.0.1:38088/card=idcard", function(res){
                if(res.code == '0'){
                    add_img(res.IDCardInfo.photoBase64);
                    my_log("身份证头像：" + res.IDCardInfo.photoBase64);
                    my_log("身份证民族代码：" + res.IDCardInfo.nationCode);
                    my_log("身份证性别代码：" + res.IDCardInfo.sexCode);
                    my_log("身份证有效终止日期：" + res.IDCardInfo.validEnd);
                    my_log("身份证有效起始日期：" + res.IDCardInfo.validStart);
                    my_log("身份证发卡机构：" + res.IDCardInfo.issueOrgan);
                    my_log("身份证号码：" + res.IDCardInfo.cardID);
                    my_log("身份证地址：" + res.IDCardInfo.address);
                    my_log("身份证生日：" + res.IDCardInfo.birthday);
                    my_log("身份证性别：" + res.IDCardInfo.sex);
                    my_log("身份证姓名：" + res.IDCardInfo.name);
                    my_log("身份证读取成功，信息如下：");
                }else{
                    my_log("读取失败");
                }
            })
        }

        // 弹出签字窗口: GW500A &  GW1000A
        function sign(){
            data = {
                "pos": {
                    "top": "250",
                    "left": "280",
                    "width": "600",
                    "height": "250"
                    },
                "remark": "开始签名"
            }
            $.post("http://127.0.0.1:38088/serialport=sign", JSON.stringify(data), function(res){
                my_log("弹出签字窗口成功");
            })
        }

        // 获取签名图片
        function get_sign(){
            $.post("http://127.0.0.1:38088/pendisplay=getsigndata", function(res){
                add_img(res.data);
                my_log("获取签名图片成功");
            })
        }

        // 开始录制视频
        function start_video(){
            data = {
                "action": "start",
                "parameter": {
                    "camidx": "0",
                    "width": "640",
                    "hieght": "480",
                    "audio": "",
                    "framerate": "10",
                    "filepath": "D://a.mp4",
                    "bit_rate": "400000"
                }
            }
            $.post("http://127.0.0.1:38088/video=record", JSON.stringify(data), function(res){
                if(res.code == "0"){
                    my_log("开始录制视频。。。");
                }
            })
        }

        // 结束录制视频
        function end_video(){
            data = {
                "action": "stop"
            }
            $.post("http://127.0.0.1:38088/video=record", JSON.stringify(data), function(res){
                if(res.code == "0"){
                    my_log("结束录制，文件保存地址：D:a.mp4，时长：" + res.time);
                }
            })
        }

        // 获取音频设备列表
        function get_audio_list(){
            data =  {
                "action": "audio"
            }
            $.post("http://127.0.0.1:38088/video=record", JSON.stringify(data), function(res){
                my_log("音频设备列表：" + res.audio);
            })
        }

        // 获取录制视频状态
        function get_video_status(){
            data = {
                "action": "status"
            }
            $.post("http://127.0.0.1:38088/video=record", JSON.stringify(data), function(res){
                res_status = {
                    "100": "空闲中",
                    "101": "录像中",
                    "102": "设备错误"
                }
                my_log("当前状态：" + res_status[res.status]);
            })
        }

        // 开启A3A4幅面自动切换
        function open_a3a4(){
            data = {
                "switchflag": "1",
                "a3size": "0.5",
                "a4size": "0.9"
            }
            $.post("http://127.0.0.1:38088/device=a3a4switch", JSON.stringify(data), function(res){
                my_log("开启A3A4幅面自动切换成功");
            })
        }

        // 关闭A3A4幅面自动切换
        function close_a3a4(){
            data = {
                "switchflag": "0",
                "a3size": "0.5",
                "a4size": "0.9"
            }
            $.post("http://127.0.0.1:38088/device=a3a4switch", JSON.stringify(data), function(res){
                my_log("关闭A3A4幅面自动切换成功");
            })
        }

        /**
         * PDF相关操作
        */
        // 拍照并添加到PDF队列
        function add_pdf(){
            // 1.先拍照获取图片数据
            data1 = {
                "filepath": "base64",
                "rotate": "0",
                "cutpage": "0",
                "camidx": String(view),
                "ColorMode": "0",
                "quality": "0"
            }
            $.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data1), function(res1){
                // 2.将图片添加到PDF队列中
                data2 = {
                    "ImagePath": "",
                    "ImageBase64": res1.photoBase64
                }
                $.post("http://127.0.0.1:38088/pdf=addimage", JSON.stringify(data2), function(res2){
                    my_log("拍照成功，并添加PDF队列成功");
                })
                add_img(res1.photoBase64);
            })
        }
        
        // 生成PDF文件
        function save_pdf(){
            data = {
                "PdfPath": "D://pdf.pdf"
            }
            $.post("http://127.0.0.1:38088/pdf=save", JSON.stringify(data), function(res){
                if(res.code == "0"){
                    my_log("PDF文件生成成功，【D:pdf.pdf】")
                }else{
                    my_log(res.data)
                }
            })
        }

        /**
         * 人脸相关操作
        */
        // 活体检测
        function is_living_person(){
            data = {
                "time": "20"
            }
            $.post("http://127.0.0.1:38088/faceLive=start", JSON.stringify(data), function(res){
                my_log('返回值： ' + res.data);
            })
        }

        // 人证比对
        function person_and_IDCard(){
            // 1.先拍摄人脸图片
            data = {
                "filepath": "base64",
                "rotate": "0",
                "cutpage": "0",
                "camidx": "1",
                "ColorMode": "0",
                "quality": "0"
            }
            $.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data), function(res1){
                var img1 = res1.photoBase64;
                add_img(img1);

                // 2.读取身份证，获取头像
                $.post("http://127.0.0.1:38088/card=idcard", function(res2){
                    var img2 = res2.IDCardInfo.photoBase64;
                    add_img(img2);
                    
                    // 3.比对
                    data3 = {
                        "FaceOne": img1,
                        "FaceTwo": img2
                    }
                    $.post("http://127.0.0.1:38088/comparison=imgdata", JSON.stringify(data3), function(res3){
                        my_log("比对值：" + res3.data)
                    })
                })
            })
        }

        /**
         * OCR相关操作
        */
        // ocr
        function ocr(){
            my_log('将会识别本地图片，D:a.jpg，请确保图片已存在');
            data = {
                "ocrflag": "1",
                "picfilepath": "D://a.jpg",
                "savefilepath": "D://ocr.pdf"
            }
            $.post("http://127.0.0.1:38088/video=ocr", JSON.stringify(data), function(res){
                if(res.code == '0'){
                    my_log("识别成功，保存在：D:ocr.pdf")
                }else{
                    my_log("识别失败")
                }
            })
        }

        /**
         * 设备相关操作
        */
        // 获取设备型号
        function getequipmenttype(){
            $.post("http://127.0.0.1:38088/device=getequipmenttype", function(res){
                if(res.code == '0'){
                    my_log("设备型号：" + res.data)
                }else{
                    my_log("获取设备型号失败")
                }
            })
        }

        // 获取设备序列号
        function getsonixserialnumber(){
            $.post("http://127.0.0.1:38088/device=getsonixserialnumber", function(res){
                if(res.code == '0'){
                    my_log("设备序列号：" + res.data)
                }else{
                    my_log("获取设备序列号失败")
                }
            })
        }

        // 获取设备状态
        function get_status(){
            $.post("http://127.0.0.1:38088/video=status", function(res){
                my_log("副摄像头状态：" + res.video1)
                my_log("主摄像头状态：" + res.video0)
            })
        }

        // 判断设备是否连接
        function is_connect(){
            $.post("http://127.0.0.1:38088/device=isconnect", function(res){
                if(res.data == "0"){
                    my_log("设备未连接")
                }else{
                    my_log("设备连接数：" + res.data)
                }
            })
        }

        /**
         * 串口
        */
        
    </script>
</body>
</html>